<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../vue.min.js"></script>

    <title>Document</title>
</head>
<body>
    <divid="app">
    <p>First name: <input type="text" v-model="firstName"></p>
    <p>Last name: <input type="text" v-model="lastName"></p>
    <p>fullname:{{fullname}}</p>
    <button @click="change">改变fullname</button>
        </div>
</body>
<script>
        var vm = new Vue({ 
        el: "#app", 
        data: {
            firstName: 'Foo'
            lastName:'Bar',
        }
        watch: {
            firstName:function(val){
                this fullName = val +''+ this.lastName;
            }
            lastName:function(val) {
                this fullName - this firstName + ''+ val;
            }
        },
        computed: { 
            fullName:{
            get: function() {
                return this firstName + '' + this.lastName;
                set: function(newValue) {
                    var names = newValue.split('');
                    this firstName = names[0];
                    this.lastName = names[names.length - l];
                }
            }
        }
    })
     
</script>
</html>